<template>
    <div>
        <main class="mobile-page">
            <!-- 设备信息 -->
            <div class="device-info-section">
                <device-info :infodata="deviceInfoData"></device-info>
            </div>

            <!-- 图表数据 -->
            <div class="device-data-section">
                <ul class="tabs">
                    <li
                            @click="handleTab('leakCurrent')"
                            class="tab"
                            :class="{ active: activeValue == 'leakCurrent', alarm: alarmType == 'leakCurrent' ,preAlarm: alarmType == 'overLeakCurrentWarning'}"
                    >
                        剩余电流
                    </li>
                    <li
                            @click="handleTab('temperature')"
                            class="tab"
                            :class="{ active: activeValue == 'temperature', alarm: alarmType == 'temperature' ,preAlarm: ['overTemperatureWarning'].includes(alarmType)}"
                    >
                        温度信息
                    </li>
                    <li @click="handleTab('voltage')" class="tab"
                        :class="{ active: activeValue == 'voltage', alarm: alarmType == 'voltage' ,preAlarm: ['overVoltageWarning','underVoltageWarning'].includes(alarmType)}"
                    >
                        电压信息
                    </li>
                    <li @click="handleTab('activePower')" class="tab"
                        :class="{ active: activeValue == 'activePower', alarm: alarmType == 'activePower'}"
                    >
                        有功功率
                    </li>
                    <li @click="handleTab('current')" class="tab"
                        :class="{ active: activeValue == 'current', alarm: alarmType == 'current' ,preAlarm: ['overCurrentWarning','underCurrentWarning'].includes(alarmType)}"
                    >
                        电流信息
                    </li>
                    <li @click="handleTab('powerFactor')" class="tab"
                        :class="{ active: activeValue == 'powerFactor', alarm: alarmType == 'powerFactor' ,preAlarm: preAlarm&&alarmType == 'powerFactor'}"
                    >
                        功率因数
                    </li>
                </ul>
                <div class="tab-container">
                    <div v-if="hasAlarm==activeValue" class="alarm-info-section" >
                        <div class="alarm-info" :style="{backgroundColor: color}">
                            <p>{{ deviceInfoData.alarmContent }}</p>
                            <p>{{ deviceInfoData.alarmTimePoint }}</p>
                        </div>
                    </div>
                    <div v-if="activeValue == 'leakCurrent'">
                        <line-chart class="chart-item" :chartData="leakCurrentData"></line-chart>
                        <table-data class="table-data" :tableData="leakTableData" :color="leakColor"
                                    :upperLimit="true"></table-data>
                    </div>
                    <div v-if="activeValue == 'temperature'">
                        <line-chart class="chart-item" :chartData="temperatureData"></line-chart>
                        <table-data class="table-data" :tableData="temperatureTableData" :color="temperatureColor"
                                    :upperLimit="true"></table-data>
                    </div>
                    <div v-if="activeValue == 'voltage'">
                        <line-chart class="chart-item" :chartData="voltageData"></line-chart>
                        <table-data
                                class="table-data"
                                :tableData="voltageTableData"
                                :color="voltageColor"
                                :upperLimit="true"
                                :lowerLimit="true"
                        ></table-data>
                    </div>
                    <div v-if="activeValue == 'activePower'">
                        <line-chart class="chart-item" :chartData="activePowerData"></line-chart>
                        <table-data class="table-data" :tableData="activePowerTableData"
                                    :color="activeColor"></table-data>
                    </div>
                    <div v-if="activeValue == 'current'">
                        <line-chart class="chart-item" :chartData="currentData"></line-chart>
                        <table-data class="table-data" :tableData="currentTableData" :color="currentColor"
                                    :upperLimit="true"></table-data>
                    </div>
                    <div v-if="activeValue == 'powerFactor'">
                        <line-chart class="chart-item" :chartData="powerFactorData"></line-chart>
                        <table-data class="table-data" :tableData="powerFactorTableData"
                                    :color="powerFactorColor"></table-data>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
    import ajax from '@/utils/ajax.js'
    import DeviceInfo from './components/DeviceInfo'
    import LineChart from './components/LineChart'
    import TableData from './components/TableData'
    import date from '../../utils/date'
    export default {
        components: {
            DeviceInfo,
            LineChart,
            TableData,
        },
        created() {
            let winWide = document.body.clientWidth
            var rem = (winWide / 750) * 100 + 'px'
            document.documentElement.style.fontSize = rem
            // 从url获取事件id
            let url = window.location.href
            let splitParams = url.split('?')[1]
            if (splitParams) {
                let parameters = splitParams.split('&')
                for (let item of parameters) {
                    let key = item.split('=')[0]
                    let value = item.split('=')[1]
                    if (key.includes('id')) {
                        this.id = value
                    }
                }
                this.getData()
            } else {
                this.$message({
                    message: '访问的url有误',
                    type: 'warning',
                })
            }
        },
        data() {
            return {
                id: '', //事件id
                deviceInfoData: {},
                activeValue: 'leakCurrent',
                hostType: 'threePhase',
                alarmType: '',

                leakCurrentData: {},
                temperatureData: {},
                voltageData: {},
                activePowerData: {},
                currentData: {},
                powerFactorData: {},

                leakTableData: [],
                leakColor: ['#ae5da1', '#13b5b1'],
                temperatureTableData: [],
                temperatureColor: ['#ffd119', '#8fc31f', '#e60012', '#00b7ee', '#ff903d'],
                voltageTableData: [],
                voltageColor: ['#ffd119', '#8fc31f', '#e60012'],
                activePowerTableData: [],
                activeColor: ['#ffd119', '#8fc31f', '#e60012'],
                currentTableData: [],
                currentColor: ['#ffd119', '#8fc31f', '#e60012'],
                powerFactorTableData: [],
                powerFactorColor: ['#ffd119', '#8fc31f', '#e60012'],
                color: '',
                preAlarm: true,
                hasAlarm: false,
            }
        },
        methods: {
            getData() {
                // alert(this.$API.getAlarmSensor)
                console.log(this.id)
                ajax.get({
                    url: this.$API.getAlarmSensor+this.id,
                    // data: {
                    //     // id: 4885744,
                    //     // id: 5101305,
                    //     id: this.id,
                    // },
                    showLoading: false,
                    success: (res) => {
                        console.log(res)
                        this.deviceInfoData = res.data.data//报警设备类型，报警错误信息
                        if (res.data.data.hostType.includes('SK6100-A')) {
                            this.hostType = 'singlePhase'
                        } else {
                            this.hostType = 'threePhase'
                        }
                        if (res.data.data.alarmType) {
                            this.alarmType = res.data.data.alarmType
                            //当前激活的项
                            switch(this.alarmType){
                                case 'overLeakCurrentWarning':
                                    this.activeValue = 'leakCurrent'
                                    this.hasAlarm ='leakCurrent'
                                    break;
                                case 'leakCurrent':
                                    this.activeValue = 'leakCurrent'
                                    this.hasAlarm = 'leakCurrent'
                                    break;
                                case 'overVoltageWarning':
                                    this.activeValue = 'voltage'
                                    this.hasAlarm =  'voltage'
                                    break;
                                case 'underVoltageWarning':
                                    this.activeValue = 'voltage'
                                    this.hasAlarm = 'voltage'
                                    break;
                                case 'voltage':
                                    this.activeValue = 'voltage'
                                    this.hasAlarm = 'voltage'
                                    break;
                                case 'current':
                                    this.activeValue = 'current'
                                    this.hasAlarm = 'current'
                                    break;
                                case 'overCurrentWarning':
                                    this.activeValue = 'current'
                                    this.hasAlarm = 'current'
                                    break;
                                case 'overTemperatureWarning':
                                    this.activeValue = 'temperature'
                                    this.hasAlarm = 'temperature'
                                    break;
                                case 'temperature':
                                    this.activeValue = 'temperature'
                                    this.hasAlarm = 'temperature'
                                    break;
                                default :
                                    this.activeValue = 'leakCurrent'
                                    break;

                            }
                            // voltage  current  leakCurrent  temperature
                            // overVoltageWarning 电压过高预警
                            // underVoltageWarning 电压过低预警
                            // overLeakCurrentWarning 漏电电流过高预警
                            // overCurrentWarning 电流超出上限预警
                            // underCurrentWarning 电流低于下限预警
                            // overTemperatureWarning 温度过高预警
                        }
                        let earlyWarningArr = ['overVoltageWarning','underVoltageWarning','overLeakCurrentWarning','overCurrentWarning','underCurrentWarning','overTemperatureWarning']
                        if(earlyWarningArr.includes(this.alarmType)){
                            this.preAlarm = true
                        }else{
                            this.preAlarm = false
                        }

                        if(this.preAlarm){
                            this.color = '#ff9c00'
                        }else{
                            this.color = '#ff6e26'
                        }
                        const resp = res.data.rows//表格数据
                        this.setChartData(resp)

                    },
                })
            },
            setChartData(resData) {
                console.log('**********************************',this.deviceInfoData.alarmTimePoint.replace(/-/g, date.dateSeparator()))
                let leakCurrent = resData.leakCurrent
                let temperature = resData.temperature
                let voltage = resData.voltage
                let activePower = resData.activePower
                let current = resData.current
                let powerFactor = resData.powerFactor

                // 剩余电流
                let leakCurrentObj = {}
                let resLeak = this.dealChartData(leakCurrent, ['leakCurrent','overLeakCurrentWarning'])
                leakCurrentObj.title = '剩余电流(A)'
                leakCurrentObj.color = ['#ae5da1', '#13b5b1']
                leakCurrentObj.time = resLeak.XtimeList
                leakCurrentObj.seriesData = resLeak.seriesData
                this.leakTableData = resLeak.tableData
                leakCurrentObj.min = 0
                if (this.hostType == 'singlePhase') {
                    leakCurrentObj.max = 2
                } else {
                    leakCurrentObj.max = 6
                }
                leakCurrentObj.echartInterval = 5
                this.leakCurrentData = leakCurrentObj

                // 温度
                let temperatureObj = {}
                let resTemperature = this.dealChartData(temperature, ['temperature','overTemperatureWarning'])
                temperatureObj.title = '温度(℃)'
                if (this.hostType == 'singlePhase') {
                    temperatureObj.color = ['#e60012', '#00b7ee', '#ff8673', '#7beeff']
                    this.temperatureColor = ['#e60012', '#00b7ee', '#ff8673', '#7beeff']
                } else {
                    temperatureObj.color = ['#ffd119', '#8fc31f', '#e60012', '#00b7ee', '#ff903d']
                    this.temperatureColor = ['#ffd119', '#8fc31f', '#e60012', '#00b7ee', '#ff903d']
                }
                temperatureObj.min = 0
                temperatureObj.max = Math.ceil(resTemperature.yMax / 10) * 10
                temperatureObj.echartInterval = Math.ceil(resTemperature.yMax / 10)
                temperatureObj.time = resTemperature.XtimeList
                temperatureObj.seriesData = resTemperature.seriesData
                this.temperatureTableData = resTemperature.tableData
                this.temperatureData = temperatureObj

                // 电压
                let voltageObj = {}
                let resVoltage = this.dealChartData(voltage, ['voltage','overVoltageWarning','underVoltageWarning'])
                voltageObj.title = '电压(V)'
                voltageObj.color = ['#ffd119', '#8fc31f', '#e60012']
                voltageObj.time = resVoltage.XtimeList
                voltageObj.seriesData = resVoltage.seriesData
                voltageObj.min = 0
                if (resVoltage.yMax <= 250) {
                    voltageObj.max = 250
                } else {
                    voltageObj.max = 300
                }
                voltageObj.echartInterval = 4
                this.voltageTableData = resVoltage.tableData
                this.voltageData = voltageObj

                // 有功功率
                let activePowerObj = {}
                let resActivePower = this.dealChartData(activePower,['activePower'])
                activePowerObj.title = '有功功率(KW)'
                activePowerObj.color = ['#ffd119', '#8fc31f', '#e60012', '#0cf7ad']
                activePowerObj.time = resActivePower.XtimeList
                activePowerObj.seriesData = resActivePower.seriesData
                activePowerObj.min = 0
                activePowerObj.max = Math.ceil(resActivePower.yMax)
                activePowerObj.echartInterval = 5
                this.activePowerTableData = resActivePower.tableData
                this.activePowerData = activePowerObj


                // 电流
                let currentObj = {}
                let resCurrent = this.dealChartData(current, ['current','overCurrentWarning','underCurrentWarning'])
                currentObj.title = '电流(A)'
                currentObj.color = ['#ffd119', '#8fc31f', '#e60012', '#0cf7ad']
                currentObj.time = resCurrent.XtimeList
                currentObj.seriesData = resCurrent.seriesData
                currentObj.min = 0
                currentObj.echartInterval = 5
                this.currentTableData = resCurrent.tableData
                this.currentData = currentObj

                // 功率因数
                let powerFactorObj = {}
                let resPowerFactor = this.dealChartData(powerFactor,['powerFactor'])
                powerFactorObj.title = '功率因数'
                powerFactorObj.color = ['#ffd119', '#8fc31f', '#e60012']
                powerFactorObj.time = resPowerFactor.XtimeList
                powerFactorObj.seriesData = resPowerFactor.seriesData
                powerFactorObj.min = 0
                powerFactorObj.max = 1
                powerFactorObj.echartInterval = 5
                this.powerFactorTableData = resPowerFactor.tableData
                this.powerFactorData = powerFactorObj

            },
            dealChartData(data, type) {
                let XtimeList = []
                for (let i of data[0].listSensorData) {
                    XtimeList.push(i.localDateTime.replace(/-/g, date.dateSeparator()))
                }
                // // x轴时间数据
                // for(let j in data){
                //     for(let i in data[j]){
                //
                //     }
                //
                // }

                let seriesData = [] // 折线
                let tableData = [] // table数据
                let yMax = 0
                  console.log(this.alarmType)
                    console.log(type)
                for (let item of data) {
                    let obj = {}
                    obj.name = item.name
                    obj.type = 'line'
                    obj.symbol = 'none'
                    let YvalueList = []
                    let alarmYvalue = ''
                    for (let i of item.listSensorData) {
                        if (type.includes(this.alarmType)) {
                            if (i.localDateTime.replace(/-/g, date.dateSeparator()) == this.deviceInfoData.alarmTimePoint.replace(/-/g, date.dateSeparator())) {
                                alarmYvalue = i.value
                            }
                        }
                        YvalueList.push(i.value)
                        yMax = yMax > i.value ? yMax : i.value
                    }
                    // 设置报警点
                    // console.log('')
                    let alarmPointObj = {
                        symbol: 'circle',
                        symbolSize: 10,
                        itemStyle: {
                            color: this.color,
                        },
                        data: [
                            {
                                xAxis: this.deviceInfoData.alarmTimePoint.replace(/-/g, date.dateSeparator()),
                                yAxis: alarmYvalue,
                            },
                        ],
                    }
                    // 设置虚线连接
                    let alarmLineObj = {
                        symbol: 'none',
                        lineStyle: {
                            type: 'dashed',
                            color: this.color,
                            width: 2,
                        },
                        data: [
                            [
                                {
                                    x: '35%',
                                    y: '1%',
                                },
                                {
                                    xAxis: this.deviceInfoData.alarmTimePoint.replace(/-/g, date.dateSeparator()),
                                    yAxis: alarmYvalue,
                                },
                            ],
                        ],
                    }
                    // 判断报警类型，添加报警点
                    if (this.deviceInfoData.alarmSpecificType == item.name) {
                        obj.markPoint = alarmPointObj
                        obj.markLine = alarmLineObj
                    }

                    obj.data = YvalueList
                    seriesData.push(obj)
                    let tableObj = {}
                    tableObj.maxValue = this.formatNumber(item.maxValue)
                    tableObj.minValue = this.formatNumber(item.minValue)
                    tableObj.avgValue = this.formatNumber(item.avgValue)
                    tableObj.thresholdRoof = this.formatNumber(item.thresholdRoof)
                    tableObj.thresholdFloor = this.formatNumber(item.thresholdFloor)
                    tableObj.currentValue = this.formatNumber(item.currentValue)
                    tableData.push(tableObj)
                }
                let obj = {}
                obj.XtimeList = XtimeList
                obj.seriesData = seriesData
                obj.tableData = tableData
                obj.yMax = yMax
                return obj
            },
            formatNumber(number) {
                if (number >= 100) {
                    number = number.toFixed(0)
                } else if (number >= 10) {
                    number = number.toFixed(1)
                } else if (number > 0) {
                    number = number.toFixed(2)
                } else if (number === 0) {
                    number = number.toFixed(2)
                }
                return number
            },
            handleTab(val) {
                this.activeValue = val
            },
        },
    }
</script>

<style lang="stylus">
    .mobile-page
        position absolute
        background-color #eeeeee
        top 0
        left 0
        right 0
        bottom 0
        font-size 0.24rem
        color #000
        overflow auto

        .device-info-section
            width 7.1rem
            margin 0.2rem auto
            background-color white

        .device-data-section
            width 7.1rem
            margin: 0.6rem auto 0
            background-color white
            .tabs
                display flex
                align-items flex-end
                width 100%
                height 0.7rem
                line-height 0.7rem
                padding 0
                white-space: nowrap
                position: relative
                margin: 0

                .tab
                    flex 1
                    position relative
                    height 0.7rem
                    line-height 0.7rem
                    border: 1px solid transparent
                    text-align center
                    box-sizing border-box
                    cursor pointer
                    color #fff
                    /*background-color: #a9ddf1*/
                    background-color: #15568d;
                    vertical-align bottom

                    &::after
                        position absolute
                        right -3px
                        content ''
                        border-right 1px solid #fff
                        height: 0.4rem
                        top 50%
                        margin-top -0.2rem
                        background-color: #ffffff
                        z-index 10

                    &:last-child
                        &::after
                            border 0

                    &:first-child
                        margin-left 0

                .active
                    color #000
                    /*height 0.9rem*/
                    /*line-height 0.9rem*/
                    background-color: #fff
                    /*border-right-color: #a9ddf1*/
                    /*border-left-color: #a9ddf1*/
                    /*border-top-color: #a9ddf1*/
                    /*border-top-right-radius: 5px*/
                    /*border-top-left-radius: 5px*/

                    &::after
                        border 0

                .alarm
                    color: #ff6e26;
                .preAlarm
                    color: #ff9c00

            .tab-container
                width 7rem
                margin-bottom 0.2rem
                border-bottom-right-radius: 10px
                border-bottom-left-radius: 10px
                /*border 1px solid #a9ddf1*/
                border-top 0
                box-sizing border-box
                    box-shadow: 0.04rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.1);

                .chart-item
                    width 100%
                    height 4.5rem

                .table-data
                    margin-top 0.1rem
                    border-bottom-right-radius: 10px
                    border-bottom-left-radius: 10px
                    overflow hidden

            .alarm-info-section
                width 100%

                .alarm-info
                    display inline-block
                    height 0.5rem
                    line-height 0.5rem
                    margin-top 5px
                    margin-left 20%
                    border-radius 2px
                    padding 5px 20px
                    background #ff6e26
</style>
